<template>
  <div class="common-error-wrap">
    <div class="error-image-wrap">
      <img :src="errorImg" alt="" />
    </div>
    <div class="error-info-wrap">
      <div class="error-message-wrap">
        {{ message }}
      </div>
      <div class="error-describe-wrap">
        <span>硬件信息：</span>
        <span v-if="loading && !hardwareInfo" class="info"
          >正在获取硬件信息...</span
        >
        <span v-else-if="!hardwareInfo">硬件信息获取失败</span>
        <el-tooltip
          v-else
          class="item"
          effect="dark"
          :content="hardwareInfo"
          placement="top"
        >
          <span class="info">{{ hardwareInfo }}</span>
        </el-tooltip>

        <i class="el-icon-document-copy" @click="copy"></i>
      </div>
      <div class="error-tools-wrap">
        <el-button type="primary" @click="importInfo">导入</el-button>
        <slot name="tools"></slot>
      </div>
    </div>

    <common-upload-dialog
      upload-path="/authorize/licensecheck/importlicense"
      template-name="userTemplate.xls"
      ref="uploadDialog"
      :getList="getList"
      acceptType=".lic"
    />
  </div>
</template>

<script>
const error = require("../CommonError/assest/error.png");

export default {
  name: "CommonAuthorized",
  props: {
    type: {
      type: String,
      default: "error",
    },
    message: {
      type: String,
      default: null,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    hardwareInfo: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      errorImg: error,
      isAuthorized: false,
    };
  },
  methods: {
    importInfo() {
      this.$refs.uploadDialog.show();
    },
    copy() {
      this.$copyText(this.hardwareInfo)
        .then(() => {
          this.$GlobalSuccessMessage("复制成功！");
        })
        .catch((err) => {
          this.$GlobalErrorMessage("复制失败");
          // console.log('复制失败', err)
        });
    },
    getList() {
      this.$router.push("/login");
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
.common-error-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .error-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .error-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    margin-left: 8px;

    .error-message-wrap {
      font-size: 18px;
      color: #606266;
      margin: 16px 0;
      text-align: center;
    }

    .error-describe-wrap {
      color: #1777ce;
      font-weight: 500;
      margin-bottom: 16px;
      font-size: 14px;
      height: 40px;
      display: flex;
      align-items: flex-start;
      box-sizing: border-box;

      .info {
        width: 200px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: break-word;
      }

      .el-icon-document-copy {
        cursor: pointer;
        margin-left: 12px;
        margin-top: 3px;
      }
    }

    .error-tools-wrap {
      width: 100%;
      display: flex;
      justify-content: center;

      .el-button {
        width: 120px;
      }
    }
  }
}
</style>
